---
title: 禅模式
icon: Fullscreen
---

<MetaData
  lang="zh-CN"
  meta={{
    plugins: [{
      client: '@univerjs/sheets-zen-editor',
      facade: '@univerjs/sheets-zen-editor/facade',
      locale: '@univerjs/sheets-zen-editor/locale/zh-CN',
      style: '@univerjs/sheets-zen-editor/lib/index.css',
    }],
    server: '否',
  }}
/>

禅模式允许用户在一个简洁的界面中专注于单元格内容的编辑。

## 预设模式

禅模式并未提供预设模式，但支持与其插件混用。

### 安装

```package-install
npm install @univerjs/sheets-zen-editor
```

### 使用

```typescript
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'
import UniverPresetSheetsCoreZhCN from '@univerjs/preset-sheets-core/locales/zh-CN'
import { UniverSheetsZenEditorPlugin } from '@univerjs/sheets-zen-editor'
import SheetsZenEditorZhCN from '@univerjs/sheets-zen-editor/locale/zh-CN' // [!code ++]

import '@univerjs/sheets-zen-editor/facade' // [!code ++]

import '@univerjs/sheets-zen-editor/lib/index.css' // [!code ++]

const { univerAPI } = createUniver({
  locale: LocaleType.ZH_CN,
  locales: {
    [LocaleType.ZH_CN]: mergeLocales(
      UniverPresetSheetsCoreZhCN,
      SheetsZenEditorZhCN, // [!code ++]
    ),
  },
  presets: [
    UniverSheetsCorePreset(),
  ],
  plugins: [
    UniverSheetsZenEditorPlugin, // [!code ++]
  ],
})
```

## 插件模式

### 安装

```package-install
npm install @univerjs/sheets-zen-editor
```

### 使用

```typescript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import { UniverSheetsZenEditorPlugin } from '@univerjs/sheets-zen-editor' // [!code ++]
import SheetsZenEditorZhCN from '@univerjs/sheets-zen-editor/locale/zh-CN' // [!code ++]

import '@univerjs/sheets-zen-editor/lib/index.css' // [!code ++]

import '@univerjs/sheets-zen-editor/facade' // [!code ++]

const univer = new Univer({
  locale: LocaleType.ZH_CN,
  locales: {
    [LocaleType.ZH_CN]: mergeLocales(
      SheetsZenEditorZhCN, // [!code ++]
    ),
  },
})

univer.registerPlugin(UniverSheetsZenEditorPlugin) // [!code ++]
```

## Facade API

完整 Facade API 类型定义，请查看 [FacadeAPI](https://reference.univer.ai/zh-CN)

### 进入禅编辑模式

`FWorkbook.startZenEditingAsync()` 可以进入禅编辑模式，此时会打开一个全屏编辑器，可以编辑当前活动单元格的内容。

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const success = await fWorkbook.startZenEditingAsync()
```

### 退出禅编辑模式

`FWorkbook.endZenEditingAsync(save)` 可以退出禅编辑模式，此时会关闭全屏编辑器，如果 `save` 为 `true`，则会保存编辑器中更改的内容。

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const success = await fWorkbook.endZenEditingAsync(true)
```

### 事件监听

禅编辑器可以使用[单元格的编辑事件](http://localhost:3000/zh-CN/guides/sheets/features/core/range-selection#%E5%BC%80%E5%A7%8B%E7%BC%96%E8%BE%91%E4%BA%8B%E4%BB%B6)达到监听编辑器的变化：

- `univerAPI.Event.BeforeSheetEditStart`：进入禅编辑模式前
- `univerAPI.Event.SheetEditStarted`：进入禅编辑模式后
- `univerAPI.Event.BeforeSheetEditEnd`：退出禅编辑模式前
- `univerAPI.Event.SheetEditEnded`：退出禅编辑模式后
